<template>
	<view class="userinfo">
		<view class="gap-v"></view>
		<view class="userinfo__cell" hover-class="btn-hover">
			<view class="userinfo__cell-label">头像</view>
			<!-- #ifdef MP -->
			<button class="userinfo__cell-value userinfo__cell-choose" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
				<image class="userinfo__cell-avatar" v-if="postForm.avatar" :src="postForm.avatar" mode="aspectFill"></image>
				<image class="userinfo__cell-avatar" v-else src="@/static/images/avatar.png" mode="aspectFit"></image>
			</button>
			<!-- #endif -->
			<!-- #ifndef MP -->
			<view class="userinfo__cell-value" @click="handleChooseAvatar">
				<image class="userinfo__cell-avatar" v-if="postForm.avatar" :src="postForm.avatar" mode="aspectFill"></image>
				<image class="userinfo__cell-avatar" v-else src="@/static/images/avatar.png" mode="aspectFit"></image>
			</view>
			<!-- #endif -->
			<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
		</view>
		<view class="userinfo__cell" hover-class="btn-hover" @click="onShowNickName">
			<view class="userinfo__cell-label">昵称</view>
			<view class="userinfo__cell-value">{{ postForm.nickname || '点击设置' }}</view>
			<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
		</view>
		
		<view class="gap-v"></view>
		
		<view class="userinfo__cell" hover-class="btn-hover" @click="toBindPhonePage">
			<view class="userinfo__cell-label">绑定手机</view>
			<view class="userinfo__cell-value">{{ postForm.mobile | entryMobile }}</view>
			<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
		</view>
		
		<!-- <view class="logout">
			<button class="logout-btn" hover-class="btn-hover" @click="handleLogout">退出登录</button>
		</view> -->
		
		<u-modal :show="showNickName" :showConfirmButton="false">
			<view class="modal__wrap">
				<view class="modal__title">修改昵称</view>
				<form class="nickname__form" @submit="handleNickNameConfirm">
					<input class="nickname-input" name="nickName" type="nickname" :value="nickName" placeholder="请在此处输入" />
					<view class="nickname-btns">
						<button class="nickname-btn" type="default" @click="showNickName = false">关闭</button>
						<button class="nickname-btn nickname-submit" type="default" form-type="submit">确定</button>
					</view>
				</form>
			</view>
		</u-modal>
		
		<movable-go-home></movable-go-home>
	</view>
</template>

<script>
	import { deepClone, sleep } from '@/utils/util.js'
	import { onSingleUploadImage, onCommonUpload } from "@/utils/upload.js"
	import { updateUserInfo } from '@/api/user.js'
	import userMixins from '@/mixins/user.js'
	
	export default {
		mixins: [userMixins],
		data() {
			return {
				postForm: {},
				// 昵称
				nickName: '',
				showNickName: false,
			}
		},
		async onLoad() {
			this.$wxSdkUtil.init(null, { hideShare: true })
			if (!this.userInfo || JSON.stringify(this.userInfo) === '{}') {
				await this.getUserInfo()
			}
			this.postForm = deepClone(this.userInfo)
		},
		methods: {
			// 选择头像
			async handleChooseAvatar(event) {
				// #ifdef MP
				const { avatarUrl } = event.detail
				const { url } = await onCommonUpload(avatarUrl, undefined, false)
				// #endif
				// #ifndef MP
				const { url } = await onSingleUploadImage()
				// #endif
				
				await sleep(300)
				this.handleUpdateAvatar(url)
			},
			// 修改头像
			async handleUpdateAvatar(url) {
				try {
					uni.showLoading({ title: '正在更新' })
					await updateUserInfo({ avatar: url, nickname: this.postForm.nickname })
					this.postForm.avatar = url
					uni.showToast({
						title: '更新成功',
						icon: 'success'
					})
				} catch(e) {
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
				}
			},
			
			// 显示昵称弹窗
			onShowNickName() {
				this.showNickName = true
				this.nickName = this.postForm.nickname
			},
			// 确认修改昵称
			async handleNickNameConfirm(event) {
				try {
					const { nickName } = event.target.value
					await updateUserInfo({ nickname: nickName, avatar: this.postForm.avatar })
					this.postForm.nickname = nickName
					this.showNickName = false
					uni.showToast({
						title: '更新成功',
						icon: 'success'
					})
				} catch(e) {
					uni.showToast({
						title: e.message,
						icon: 'none'
					})
				}
			},
			// 去更换手机号页
			toBindPhonePage() {
				uni.redirectTo({
					url: `/pages/bind-phone/index?mobile=${this.postForm.mobile || ''}`
				}, true)
			},
			// 退出登录
			handleLogout() {
				this.resetToken().then(() => {
					uni.switchTab({
						url: '/pages/stock/index'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userinfo {
		&__cell {
			height: 112rpx;
			display: flex;
			align-items: center;
			gap: 10rpx;
			padding: 0 30rpx;
			background-color: #fff;
			&-label {
				flex: 1;
				font-size: 32rpx;
				font-weight: 500;
				line-height: 1;
				color: $u-main-color;
			}
			&-value {
				flex: 2.5;
				text-align: right;
				font-size: 32rpx;
				font-weight: normal;
				line-height: 1;
				color: $u-tips-color;
			}
			&-choose {
				padding: 0;
				margin: 0;
				background-color: #fff;
				&::after {
					border: none;
				}
			}
			&-avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: $u-bg-color;
			}
		}

		.logout {
			position: fixed;
			left: 50%;
			bottom: 50rpx;
			transform: translateX(-50%);
			z-index: 2;
			&-btn {
				width: 300rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin: 0;
				padding: 0;
				font-size: 32rpx;
				font-weight: 500;
				color: $u-main-color;
				text-align: center;
				background-color: #fff;
				border-radius: 12rpx;
				&::after {
					border: none;
				}
			}
		}
		.motto-input {
			box-sizing: border-box;
			width: 100%;
			background-color: $u-bg-color;
			padding: 10rpx 20rpx;
			border-radius: 12rpx;
		}
		.modal__wrap {
			flex: 1;
			.modal__title {
				font-size: 32rpx;
				font-weight: bold;
				color: #666666;
				text-align: center;
				padding-top: 26rpx;
			}
		}
		
		.nickname__form {
			width: 100%;
			.nickname-input {
				width: 100%;
				padding: 12rpx 0;
				font-size: 30rpx;
				color: $u-main-color;
				border-bottom: 1px solid $u-border-color;
			}
			.nickname-btns {
				margin-top: 30rpx;
				display: flex;
				.nickname-btn {
					flex: 1;
					background-color: #fff;
					font-size: 30rpx;
					color: $u-main-color;
					border: 1px solid $u-border-color;
					&::after {
						border: none;
					}
				}
				.nickname-submit {
					margin-left: 30rpx;
					color: #fff;
					background-color: $u-theme-color;
					border: 1px solid $u-theme-color;
				}
			}
		}
	}
</style>